import { useRef, useEffect, useState } from 'react'
import { makeStyles, Theme } from '@material-ui/core/styles';
import { Card, CardActionArea, CardMedia, CardContent, Typography, CardActions, Button } from '@material-ui/core'
import LinkMyPage from './LinkMyPage'
const prefix = '/boboan.github.io'
const useStyles = makeStyles((theme: Theme) => ({
  root: {
    paddingTop: theme.spacing(2)
  },
  media: {
    position: 'relative',
    height: '250px',
    filter: 'blur(30px)',
    transition: '0.5s',
    transform: 'scale(1.2)',
    '&.hover': {
      filter: 'blur(0px)',
      transform: 'scale(1)',
    }
  },
  avatarContainer: {
    position: 'relative',
    overflow: 'hidden',
    height: '300px',
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center'
  },
  avatarBack: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundImage: `url(${prefix}/images/back1.jpg)`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: '50% 50%',
    filter: 'blur(30px)',
  },
  avatar: {
    position: 'absolute',
    pointerEvents: 'none',
    top: '50%',
    left: '50%',
    marginTop: '-100px',
    marginLeft: '-64px',
    height: '128px',
    width: '128px',
    borderRadius: '64px',
    backgroundImage: `url(${prefix}/images/avatar.jpg)`,
    backgroundSize: 'cover',
    transition: '0.5s',
    transform: 'scale(1)',
    '&.hover': {
      filter: 'blur(100px)',
      transform: 'scale(2)',
    }
  },
  linkPage: {
    marginTop: theme.spacing(2)
  }
}))

export default function () {
  const classes = useStyles()
  const [hover, setHover] = useState(false)

  return <div className={classes.root}>
    {/* 头像 */}
    <Card
      onMouseEnter={() => { !hover && setHover(true) }}
      onMouseLeave={() => { hover && setHover(false) }}
    >
      <CardActionArea>
        <CardMedia
          className={`${classes.media} ${hover ? 'hover' : ''}`}
          image={`${prefix}/images/back1.jpg`}
          title="Contemplative Reptile"
        />
        <div className={`${classes.avatar} ${hover ? 'hover' : ''}`}></div>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Boboan
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            boboan.hand.touch(fish)
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          摸鱼
        </Button>
        <Button size="small" color="primary">
          一会再摸
        </Button>
      </CardActions>
    </Card>
    {/* <div className={classes.avatarContainer}>
      <div className={classes.avatarBack}></div>
      <div className={classes.avatar}></div>
    </div> */}
    {/* 目录 */}
    <div className={classes.linkPage}>
      <LinkMyPage />
    </div>
  </div>
}
